<template>
  <div class="content">
    <template v-if="route.name == 'activeFaultAvoidance'">
      <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="100px">
        <el-form-item label="关键词" prop="keyword">
          <el-input style="width:300px" v-model="queryParams.keyword" placeholder="请输入关键词" clearable />
        </el-form-item>
        <el-form-item label="数据日期">
          <el-form-item label-width="0px">
            <el-date-picker style="width:140px" v-model="queryParams.startTime" type="date" placeholder="开始时间"
              value-format="YYYY-MM-DD" :disabled-date="startDisableDate"/>
          </el-form-item>
          <span class="spanStyle">至</span>
          <el-form-item>
            <el-date-picker style="width:140px" v-model="queryParams.endTime" type="date" placeholder="结束时间"
              value-format="YYYY-MM-DD" :disabled-date="endDisableDate"/>
          </el-form-item>
        </el-form-item>
        <el-form-item label="名称" prop="meansName">
          <el-input style="width:300px" v-model="queryParams.meansName" placeholder="请输入名称" clearable />
        </el-form-item>
        <el-row>
          <el-col style="text-align: center">
            <el-form-item>
              <el-button type="primary" @click="handleQuery">搜索</el-button>
              <el-button type="primary" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <ul class="ulList">
        <li class="list" v-for="item in dataList" @click="handleDetail(item.id)" v-if="dataList.length > 0">
          <div style="display: flex;align-items: center;width:100%;height: 160px;margin: 30px 0px;width: 100%;">
            <img :src="baseUrl + item.pictureFile" alt="" class="img">
            <div
              style="flex: 1;width:calc(100% - 200px); height: 160px;margin-left: 20px;flex-direction: column;display: flex;">
              <p style="display: flex;justify-content: space-between;">
                <span style="font-size: 20px;font-weight: bold;">{{ item.meansName }}</span>
                <span v-if="item.plottingScale" style="font-size: 16px;color: #999;margin-right: 36px;">比例尺： {{
                  item.plottingScale }}</span>
                <span v-else style="margin-right: 36px;"></span>
              </p>
              <p style="padding: 12px 0px;">
                <span style="font-size: 16px;">关键词:</span>
                <template v-if="item.keyword">
                  <el-tag class="ml-2" style="margin-left: 15px;font-size: 16px;color: #666;" type="info"
                    v-for="key in item.keyword.split(',')">{{
                      key
                    }}</el-tag>
                </template>
                <template v-else>
                  <span style="margin-left: 15px;font-size: 16px;color: #666;">无</span>
                </template>
              </p>
              <p style="width:100%;flex:1;height: 47px;font-size: 18px;color: #333;overflow: hidden;">
                <span style="font-size: 16px;">描述:</span>
                <template v-if="item.pictureDescribe.length <= 50">
                  <span style="margin-left: 10px;font-size: 16px;">{{ item.pictureDescribe }}</span>
                </template>
                <template v-else>
                  <el-tooltip :content="item.pictureDescribe" placement="bottom" effect="light" style="display: inline-block;">
                    <span style="margin-left: 10px;">{{ item.pictureDescribe.slice(0,50) }}...</span>
                  </el-tooltip>
                </template>
              </p>
              <p style="color: #666;font-size: 14px;">
                <span>{{ item.publishingUnit }}</span><span style="margin-left: 40px;">{{ item.releaseDate }}</span>
              </p>
            </div>
          </div>
        </li>
        <el-empty :image-size="200" v-else />
      </ul>
    </template>
    <template v-else>
      <router-view></router-view>
    </template>
  </div>
</template>
  
<script setup>
import { getAllList, detail } from '@/api/thematicMap/probeClass/activeFault';
import routerListStore from "@/store/modules/routerList";
const router = useRouter();
const route = useRoute();

const routerList = routerListStore();
const routerName = computed(() => routerList.routerName);
const { proxy } = getCurrentInstance();
const baseUrl = import.meta.env.VITE_APP_BASE_API + "/attachment/downLoadFile?attachId=";

const loading = ref(false);
const dataList = ref([]);

const data = reactive({
  queryParams: {
    keyword: undefined,
    startTime: undefined,
    endTime: undefined,
    meansName: undefined,
    releaseColumn: '活断层避让分布图',
    releaseStatus:0,
  },
  form: {
  },
})
const { queryParams, form, } = toRefs(data);

watch(() => router.currentRoute.value.path, (newValue, oldValue) => {
  getListDetail();
}, { immediate: true })

// 跳详情页
function handleDetail(id) {
  router.push({
    path: '/thematicMap/probeClass/activeFaultAvoidance/activeFaultAvoidanceDetail',
    query: {
      id: id
    }
  })
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.page = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  queryParams.value.startTime = undefined;
  queryParams.value.endTime = undefined;
  handleQuery();
}

// 时间可选范围控制
const startDisableDate = (time) => {
	let endDateVal = queryParams.value.endTime;
	if (endDateVal) {
		return time.getTime() > new Date(endDateVal).getTime();
	}
};
const endDisableDate = (time) => {
	let beginDateVal = queryParams.value.startTime;;
	if (beginDateVal) {
		return time.getTime() < new Date(beginDateVal).getTime();
	}
};

/** 查询数据列表 */
function getList() {
  loading.value = true;
  getAllList({ ...queryParams.value }).then(response => {
    dataList.value = response.data ? response.data : [];
    loading.value = false;
  });
}

function getListDetail(){
  if(route.name=='activeFaultAvoidance'){
    getList();
  }else{
    // getDetail(route.query.id)
  }
}

// getListDetail();
</script>
  
<style scoped lang="scss">
.content{
  margin-top: 20px;
}
.el-form--inline .el-form-item {
  margin-right: 0px !important;
}

.spanStyle {
  display: inline-block;
  width: 20px;
  text-align: center;
}

.ulList {
  padding: 0 20px;
  margin: -18px;
  li {
    list-style-type: none;
    border-bottom: 1px solid #d7d7d7;
    display: flex;
    align-items: center;

    .img {
      height: 160px;
      width: 200px;
      box-sizing: border-box;
      border: 1px solid #f5f5f5;
    }
    p {
      margin: 0px;
    }

    .ellipsis {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}
</style>
  
  